require(['./config'], () => {
  require(['swiper', 'template', 'header'], (Swiper, template) => {
    class Index {
      constructor () {
        
        this.banner()
        this.category()
        this.getshoes()
      }
      
      
      banner () {
        new Swiper('.lunbo', {
          // direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          autoplay: {
            delay: 2000,
            speed: 1200
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        })
      }
      category () {
        $.get('/libs/json/homeCategory.json', resp => {
          console.log(resp)
          // 根据list数据渲染模板
          // template方法有两个参数
          //  第一个参数是定义模板的script标签的id，注意：不加#
          //  第二个参数是模板里所需要的数据，传一个对象： 模板里面需要list，传从后端拿到的resp进去
          // template方法的返回值就是根据模板渲染的html字符串结果
          const str = template('categoryTemplate', { list: resp })
          console.log(str)
          // 把渲染完成的html字符串放到容器盒子里
          $('#categoryList').html(str)
        })
      }
      getshoes () {
        $.get('http://rap2api.taobao.org/app/mock/244919/shop', resp => {
          console.log(resp)
          if (resp.code === 200) {
            const { list } = resp.body
            // const list = resp.body.list
            // 如果模板里的字段名和这里传递的数据变量名写法一样就可以解构赋值只写一次
            const html = template('giftTemplate', { list })
            $('#giftList').html(html)
          }
        })
      }
    }
    new Index()
  })
})
